<!--1)	刮奖卡领取日、月报表-->
<template>
  <div class="app-container">
    <!--    {{ searchObj }}-->
    <!-- banner列表 -->
    <!--   acptsiteid
cardno
optrdate
optrid
prizelevel
state
statedate
tabGgcardLog
tabGgcardStock
transn:  -->
    <div>
      <el-form :inline="true" :model="page" class="demo-form-inline">
        <el-form-item label="状态">
          <template>
            <el-select :modal="page.state" v-model="stateValus" clearable  placeholder="请选择">
              <el-option
                  v-for="item in state"
                  :key="item.stateValus"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-form-item>

        <el-form-item label="礼品等级">
          <template>
            <el-select :modal="page.prizelevel" v-model="value" clearable  placeholder="请选择">
              <el-option
                  v-for="item in prizelevel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <template>
      <el-table :data="searchObj" style="width: 100%"><!--v-loading="loading"-->
        <el-table-column prop="acptsiteid" label="受理点" width="180"></el-table-column>
        <el-table-column prop="cardno" label="卡序列号" width="180"></el-table-column>
        <el-table-column prop="optrdate" label="操作时间" width="180"></el-table-column>
        <el-table-column prop="prizelevel" label="奖品等级" width="180"></el-table-column>
        <el-table-column prop="state" label="卡状态">
          <template slot-scope="scope">
            {{ scope.row.state === '10' ? '已领取' : '未领取' }}
          </template>
        </el-table-column>
        <el-table-column prop="statedate" label="状态时间"></el-table-column>
        <el-table-column prop="transn" label="流水号"></el-table-column>
        <el-table-column prop="optrid" label="操作员"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="report(scope.row)" type="primary" icon="el-icon-edit" size="small">
              编辑
            </el-button>
            <el-button :disabled="scope.row.state ==10?true:false" @click="handleClick(scope.$index,scope.row)"
                       type="danger" icon="el-icon-delete" size="small ">删除
            </el-button>
          </template>
        </el-table-column>
        <!-- 分页 -->
      </el-table>
    </template>
    <el-pagination
        :current-page="pageNo"
        :page-size="pageSize"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="getList"
    />
    <conUpdate :dialogconUpdate.sync="dialog_show" :accuseitem="accuseitem"/>
  </div>
</template>
<script>
//引入api接口
import scratch from "../../api/scratch";
import conUpdate from "@/views/scratch/scratch_cardInfoupd";


export default {
  components: {conUpdate},
  // 定义数据模型
  data() {
    return {
      accuseitem: {},
      scoperow: "",
      dialog_show: false,
      pageNo: 1,
      pageSize: 5,
      searchObj: [],
      page: {
        pageNo: 1,
        pageSize: 5,
        prizelevel: null,
        state: null
      },
      total: 0,
      state: [{
        value: '00',
        label: '未兑'
      }, {
        value: '10',
        label: '已兑'
      }],
      stateValus: '',
      prizelevel: [{
        value: '1',
        label: '一等奖'
      }, {
        value: '2',
        label: '二等奖'
      }, {
        value: '3',
        label: '三等奖'
      }, {
        value: '4',
        label: '四等奖'
      }, {
        value: '5',
        label: '五等奖'
      }, {
        value: '6',
        label: '六等奖'
      }],
      value: null
    }
  },
  // 页面渲染成功后获取数据
  created() {
    this.getList();
  },
  methods: {//定义方法对api接口的方法调用
    report(item) {
      this.accuseitem = item;
      this.dialog_show = true;
    },
    getList(page = 1) {
      this.page.pageNo = page
      this.page.prizelevel = this.value
      this.page.state = this.stateValus
      scratch.showList(this.page)
          .then(res => {
            this.total = res.data.total
            this.searchObj = res.data.records
            console.log(res)
          })//请求成功
          .catch(error => {
            console.log(error)
          })//请求失败
    }, onSubmit() {
      this.getList();
    },  //单行删除
    handleClick(index, row) {
      this.msg = row
      this.$confirm('此操作将永久删除这条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        scratch.detelect(this.msg.cardno).then(res => {
          console.log(this.msg.cardno)
          if (res.data == true) {
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
          } else {
            this.$message({
              type: 'defeated',
              message: '删除失败!',
            });
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
};
</script>
